<template>
  <div>
      <!-- 头部 -->
    <div class="head">
      <div class="city" @click="switch_city">
        <img  
          src="../../../static/images/home/point.jpg"
        />{{cityName}}<span class="line">|</span>切换<img
          src="../../../static/images/home/rigth.png" class="point"
        />
      </div>
      <div class="share"  >
        <button open-type="share"><img src="../../../static/images/home/share2.png" />分享</button>
      </div>
    </div>
      <div class="container">
   <div class="ad">
        <swiper class="swiper" indicator-dots='true' autoplay='true' interval='3000' circular='true' indicator-color="#FDCB2E"
          indicator-active-color="white">
          <swiper-item>
            <img @click="lunbo('gzh')" mode="scaleToFill" src="https://www.dhnep.cn:8181/dhn/icon/jiuyinuandong.png" alt="公益" />
          </swiper-item>
          <swiper-item>
            <img @click="JumpMerchant()" mode="scaleToFill" src="https://www.dhnep.cn:8181/dhn/icon/dhnsc.png" alt="大黄牛合作商" />
          </swiper-item>
          <swiper-item>
            <img @click="lunbo('join')" mode="scaleToFill" src="https://www.dhnep.cn:8181/dhn/icon/join.png" alt="加盟推广" />
          </swiper-item>
          <swiper-item>
            <img @click="lunbo('no')" mode="scaleToFill" src="https://www.dhnep.cn:8181/dhn/icon/lunbo/lunbo2.png" alt="宝马"
              class="img" />
          </swiper-item>

          <swiper-item>
            <img @click="lunbo('feedback')" mode="scaleToFill" src="https://i.loli.net/2021/08/31/GIusYb7mNZgUWJF.png" alt="反馈"
              class="img" />
          </swiper-item>
        </swiper>
        <!-- //结束轮播 -->




      </div>
      </div>
    <swiper
    vertical
    class="notice-swipe"
   interval='1000'   circular='true'  autoplay='true'
  >
    <swiper-item v-for="(item,index) in notice"  :key="index" >
      <div class="item_box">
      <div class="item-left"
      ><img src="../../../static/images/home/logo.ico"/>
        <span>{{item.userName}}已预约下单</span>
      </div>
      <div class="item-rigth">
      
        {{item.payTime}}
       </div>
      </div>
    </swiper-item>
  </swiper>
    <div class="vant-cell">
      <div class="vant-col" @click="shangmen">
        <img src="https://i.loli.net/2021/10/27/Djztepy82ESnfiO.png" />
        <h3>上门回收</h3>
      </div>
      <div class="vant-col" @click="jigui">
        <img src="https://i.loli.net/2021/10/27/PO2FGkKHi3qEjwA.png" />
        <h3>机柜回收</h3>
      </div>
      <div class="vant-col" @click="courier">
        <img src="https://i.loli.net/2021/10/27/PukyEsFaZAfgiDx.png" />
        <h3>旧衣物回收</h3>
      </div>
      <div class="vant-col" @click="shop">
        <img src="https://i.loli.net/2021/10/27/KuLJs39ZNfzYIr7.png" />
        <h3>门店回收</h3>
      </div>
    </div>
    <div class="news_content">
      <div class="title"><h3>公益动态</h3></div>
      <div class="new-item" >
        <div class="new-col" v-for="(item,index) in photo" :key="index" @click="GOlink(item.pictureTestUrl)"  >
          <image class="news-images"  :src="item.pictureUrl"></image>
          <div class="newstitle">
            <p>{{item.pictureName}}</p>
          </div>
        </div>
        <!-- <div class="new-col">
          <image class="news-images" ></image>
          <div class="newstitle">
            <p>旧衣暖冬行动，一份爱心.一份温暖</p>
          </div>
        </div> -->
      </div>
    </div>
    <div class="Partners-content">
      <div class="title"><h3>合作伙伴</h3></div>
      <div class="partner-item">
        <div class="partner-col"> <img src="https://i.loli.net/2021/10/27/Zd7SwNH2FtqguEn.jpg" /></div>
        <div class="partner-col"><img src="https://i.loli.net/2021/10/27/1he4G75qvycZ8Xl.jpg" /></div>
        <div class="partner-col"><img src="https://i.loli.net/2021/10/27/ZP481BIXf23wLDs.jpg" /></div>
        <div class="partner-col"><img src="https://i.loli.net/2021/10/27/eMbnWfpH1UwRzIJ.jpg" /></div>
      </div>
    </div>
  </div>
</template>
<script>
  import store from './../../store';
  import bus from '../../utils/bus.js'
export default {
  name: "",
  data(){
      return {
        notice:'',
        cityName:'获取位置失败',
        arr:[],
        openId:'',
        userInfo:'',
        photo:''
        
      }
  },
   onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定义转发标题'
        })
      }, 2000)
    })
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      promise 
    }
  },
  onLoad : function(options){
      this.getNotice();
      this.getLocation();
     var that = this;
      var scene = decodeURIComponent(options.scene)
      if (scene != "" || scene != null) {
        //解决微信记录缓存
        wx.setStorageSync('distribution', scene);
      }
      console.log("分销openId")
      console.log(scene)
      this.autoUpdate()
      console.log('更新')
      if (wx.getStorageSync("openId") == null || wx.getStorageSync("openId") == "") {
      } else {
        this.openId = wx.getStorageSync("openId");
        this.userInfo = wx.getStorageSync("userInfo");
      }

      // //配置微信分享朋友圈
      wx.showShareMenu({
       withShareTicket: true,
       menus: ['shareAppMessage', 'shareTimeline']
      })
  }, 
 
 
  onShow() {
    this.getdynamic()
      bus.$on('updateCity',res =>{
   
       this.cityName=res;
     
      })
  },
   onShareAppMessage()
    {
      return{
        title:'书籍详情',
        path:'./pages/apk1/main'
      }
    },
  methods: {
   
        
    shop(){
      wx.showToast({
               title: '此模块未开通',
               icon: 'error',
                duration: 500
             })
    },
       autoUpdate: function() {
        let _this = this
        // 获取小程序更新机制的兼容，由于更新的功能基础库要1.9.90以上版本才支持，所以此处要做低版本的兼容处理
        if (wx.canIUse('getUpdateManager')) {
          // wx.getUpdateManager接口，可以获知是否有新版本的小程序、新版本是否下载好以及应用新版本的能力，会返回一个UpdateManager实例
          const updateManager = wx.getUpdateManager()
          // 检查小程序是否有新版本发布，onCheckForUpdate：当小程序向后台请求完新版本信息，会通知这个版本告知检查结果
          updateManager.onCheckForUpdate(function(res) {
            // 请求完新版本信息的回调
            if (res.hasUpdate) {
              // 检测到新版本，需要更新，给出提示
              wx.showModal({
                title: '更新提示',
                content: '检测到新版本，是否下载新版本并重启小程序',
                success: function(res) {
                  if (res.confirm) {
                    // 用户确定更新小程序，小程序下载和更新静默进行
                    _this.downLoadAndUpdate(updateManager)
                  } else if (res.cancel) {
                    // 若用户点击了取消按钮，二次弹窗，强制更新，如果用户选择取消后不需要进行任何操作，则以下内容可忽略
                    wx.showModal({
                      title: '提示',
                      content: '本次版本更新涉及到新功能的添加，旧版本将无法正常使用',
                      showCancel: false, // 隐藏取消按钮
                      confirmText: '确认更新', // 只保留更新按钮
                      success: function(res) {
                        if (res.confirm) {
                          // 下载新版本，重启应用
                          _this.downLoadAndUpdate(updateManager)
                        }
                      }
                    })
                  }
                }
              })
            }
          })
        } else {
          // 在最新版本客户端上体验小程序
          wx.showModal({
            title: '提示',
            content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试',
          })
        }
      },
         // 下载小程序最新版本并重启
      downLoadAndUpdate: function(updateManager) {
        wx.showLoading()
        // 静默下载更新小程序新版本，onUpdateReady：当新版本下载完成回调
        updateManager.onUpdateReady(function() {
          wx.hideLoading()
          // applyUpdate：强制当前小程序应用上新版本并重启
          updateManager.applyUpdate()
        })
        // onUpdateFailed：当新版本下载失败回调
        updateManager.onUpdateFailed(function() {
          // 下载新版本失败
          wx.showModal({
            title: '已有新版本',
            content: '新版本已经上线了，请删除当前小程序，重新搜索打开',
          })
        })
      },
         //检测是否绑定手机
      isPhone() {
        var that = this;
        wx.request({
          url: store.state.url + '/wxshop/user/isPhone',
          method: "POST",
          data: {
            "openId": that.openId,
          },
          header: {
            "Content-Type": "application/json"
          },
          success(res) {
            console.log(res.data)
            if(res.data.status==200){
              that.telShow = true;
              setTimeout(()=>{
                that.telShow = false;
                wx.navigateTo({
                  url: '../tel/main'
                })
              },3000)
            }

          }
        })
      },
       onGetUserInfo(event) {
        var that = this
        console.log(event)
        const userInfo = event.mp.detail.userInfo
        if (userInfo) {
          wx.login({
              success(login_res) {
                wx.getUserInfo({
                  success(info_res) {
                    wx.request({
                      url: store.state.url + '/wxshop/user/login',
                      method: 'POST',
                      data: {
                        code: login_res.code, //临时登录凭证
                        rawData: info_res.rawData, //用户非敏感信息
                        signature: info_res.signature, //签名
                        encrypteData: info_res.encryptedData, //用户敏感信息
                        iv: info_res.iv //解密算法的向量
                      },
                      header: {
                        'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
                      },
                      success(res) {
                        if (res.data.status == 200) {
                          console.log("openId", res.data.data.openId)
                          wx.setStorageSync('userInfo', userInfo);
                          wx.setStorageSync('openId', res.data.data.openId);
                          wx.setStorageSync('skey', res.data.data.skey);
                          wx.setStorageSync('one', 0);
                          that.openId = res.data.data.openId
                          // that.isPhone();
                          that.findAccount();
                          that.findCountOrder();
                          that.findCountEarning();
                          // that.downloadImg();
                          console.log(wx.getStorageSync("distribution"))
                          if (wx.getStorageSync("distribution") != null && wx.getStorageSync("distribution") !=
                            "" && wx.getStorageSync("distribution") !=
                            "undefined") {
                            that.distribution = wx.getStorageSync("distribution");
                            wx.request({
                              url: store.state.url + '/wxshop/user/addDistribution',
                              method: "POST",
                              data: {
                                "openId": that.openId,
                                "distribution": that.distribution,
                              },
                              header: {
                                "Content-Type": "application/json"
                              },
                              success(res) {
                                console.log(res.data)
                              }
                            })
                          } else {

                          }
                        } else {
                          console.log('服务器异常');
                        }
                        console.log(res.data.status)
                      },
                      fail(error) {
                        console.log(error);
                      }
                    })
                  }
                })
              }
            }),
            this.flag = true
          this.userInfo = userInfo
        }
      },
 switch_city(){
        const url = '../city/main'
       wx.navigateTo({url:url})
      },
      //轮播图点击事件
      lunbo(url) {
        if (url == "no") {
          this.lunboShow = true;
        } else if (url == 'join') {
          console.log(url+"轮播图")
          wx.navigateTo({
            url: '../webH5/main?type=join'
          })
        }else if (url == 'gzh') {
            wx.navigateTo({
              url: '../gzh/main?context=gongyi'
            })
        }else if (url == 'feedback') {
            wx.navigateTo({
              url: '../gzh/main?context=feedback'
            })
        }
      },
      //请求公告栏数据 
      getNotice() {
        var that = this
        wx.request({
          url: store.state.url + '/wxshop/user/toptenorder',
          method: 'POST',
          success(res) {
           that.notice=res.data;
            let list=that.notice
            for(var i = 0; i < list.length; i++){
             that.notice[i].payTime= that.timestampToTime(list[i].payTime);
             that.notice[i].userName= that.formatName(list[i].userName);
            }     
          }
        })
      },
    timestampToTime:function(time) {
// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
     var date = new Date(time);
       var Y = date.getFullYear()+'-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
            var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
       return Y +M+D+h+m+s
    },
   
    getLocation(){
      var that=this;
        wx.getLocation({
        type: 'wgs84',
        success(res) {
            const latitude = res.latitude
            const longitude = res.longitude
            const speed = res.speed
            const accuracy = res.accuracy
             that.getCityInfo(latitude,longitude)
        }
        })
    },
    
    formatName(name) {
    let newStr;
    if (name.length === 2) {
    newStr = name.substr(0, 1) + '*';
    } else if (name.length > 2) {
      let char = '';
      for (let i = 0, len = name.length - 2; i < len; i++) {
        char += '*';
      }
      newStr = name.substr(0, 1) + char + name.substr(-1, 1);
    } else {
      newStr = name;
    }

    return newStr;
 },
    getCityInfo(latitude,longitude){

      let scope=this;
      wx.request({
        
        url:'http://api.map.baidu.com/reverse_geocoding/v3/?ak=ottnHG1g8QwlBKBc9ZhbYdBLcadvAL5L&output=json&coordtype=wgs84ll&location='+latitude+','+longitude,
        data:{},
        header:{
          'Content-Type':"application/json"
        },
        success:function(res){
          if(res&&res.data){
            console.log(res);
            scope.cityName=res.data.result.addressComponent.city;
            
          }else{
            console.log('获取失败')
          }
        }
      })
      },
      //上门回收
      shangmen(){
        const url = '../type/main?type=0'
       wx.navigateTo({url:url})
      },
      //机柜回收
      jigui(){
        const url = '../apk1/main'
       wx.navigateTo({url:url})
      },
      //快递回收
     courier(){
      const url = '../courier/main'
       wx.navigateTo({url:url})
     },
     GOlink(link){
   
       wx.navigateTo({
         url:'../gzh/main?context='+link
       })
     },

   //获取动态图片
       getdynamic(){
                var that =this;
                wx.request({
                url: store.state.url +'/getPicture',
                data:{
                  'Content-Type':"application/json"
                 } ,
                method: "POST",
                header: {
               
                },
               success(res) {
                  console.log(res.data)
                 if(res.data.code==10000){
                     that.photo=res.data.picture
                    
                 }  
                  
                 }
            })
    }
     },
  
};
</script>
<style>
page {
  background-color: #f3f3f3;
  padding-bottom: 5px;
}
.head {
  width: 100%;
  height: 23px;
  background-color: #fdcb2e;
  display: flex;
  font-size:14px;
  justify-content: space-between;
  color: #fff;

}
.head img {
  width: 25rpx;
  height: 25rpx;
  vertical-align: middle;
  margin-top: -0.2em;
}
.head .city .point {
  width: 18rpx;
  height: 18rpx;
  vertical-align: middle;
  margin-top: -0.2em;
}
 .swiper {
    height: 400rpx;
  }

  .container {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }
  .ad img {
    width: 100%;
    height: 400rpx;
  }

.van-notice-bar {
  margin-top: -4px;
}
.city {
  padding-left: 20rpx;
}
.share {
  padding-right: 20rpx;
}
.vant-cell {
  background-color: #fff;
  display: flex;
  margin: 20rpx auto;
  width: 95%;
  border-radius: 10rpx;
}
.vant-col {
  flex: 1;
  width: 25%;
  text-align: center;
  padding: 20rpx 0;
  font-size: 14px;
  font-weight: 500;
}
.vant-col img {
  width: 70rpx;
  height: 70rpx;
}
.news_content {
  background-color: #fff;
  width: 95%;
  margin: 0 auto;
  border-radius: 10rpx;
}
.news_content .title,
.Partners-content .title {
  padding: 18rpx;
}
.new-item {
  margin: 0 20rpx;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20rpx;
}
.new-item .new-col {
  width: 49%;
  position: relative;
}
.news-images {
  width: 100%;
  height: 200rpx;
}
.new-col .newstitle {
  font-size: 24rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.new-col .newstitle p {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  border-bottom-left-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
  box-sizing: border-box;
}
.line{
font-size:10px;

margin-left: 4px;
margin-right: 4px; 
}
.Partners-content {
  margin: 20rpx auto;
background-color: #fff;
  width: 95%;
  border-radius: 10rpx;
  margin-bottom: 10px;
}
.partner-item {
  display: flex;
  flex: 1;
  padding-bottom: 10px;
}
.partner-item .partner-col {
  width: 25%;
  height: 130rpx;
  border-radius: 10rpx;
  margin: auto 5px;
}
.partner-item .partner-col img {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
  border: 2rpx solid #f3f3f3;
}
 .notice-swipe {
   width: 95%;
   background-color:#f8f9fd;
   color: #5dabd2;
    height: 40px;
    line-height: 40px;
   margin: 20rpx auto;

    border-radius: 10rpx;

  }
  .notice-swipe img{
    width: 25rpx;
  height: 25rpx;
  vertical-align: middle;
  margin-top: -0.2em;
  }

  .item_box{
   display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 0 8px;
    font-weight: 500;
  }
  .item-left span{
   margin-left: 5px;
  }
  button{
    font-size: 12px;
border: none;
background-color: transparent;
outline: none;
border-radius:0; 
line-height:20px;
color: #fff
  }
  button::after {
    border: none;

}
</style>    
